<template>
  <div class="nnn-contain">
    <div class="cash">
      <!-- 表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="店铺ID/名称">
              <el-input v-model="formInline.user" placeholder="店铺ID/名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="优惠券">
              <el-input v-model="formInline.user" placeholder="优惠券" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button size="medium">查询</el-button>
              <el-button size="medium">重置</el-button>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <!--/ 表单 -->
    </div>
    <el-card class="hr-block">
      <div slot="header" class="clearfix">
        <span style="float: right">领取总金额：{{ 20 }}元</span>
        <span style="float: right; margin: 0 100px 0 0">发放总数量：{{ 2 }}张</span>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column prop="date" label="店铺ID" />
        <el-table-column prop="name" label="店铺名称" />
        <el-table-column prop="youhuiquan" label="优惠券名称" />
        <el-table-column prop="jine" label="优惠券金额/元" />
        <el-table-column prop="xianzhi" label="使用金额限制" />
        <el-table-column prop="shixian" label="使用时限/天" />
        <el-table-column prop="zongshu" label="发放总数量/张" />
        <el-table-column prop="lingqu" sortable label="领取金额/元" />
      </el-table>
      <div class="ymjz">
        <el-pagination
          size-change="2"
          background
          layout="prev, pager, next"
          :total="100"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      value1: '',
      showDialog: true,
      page: {
        page: 1,
        total: 0,
        pageSize: 10
      },
      list: [{
        date: '1654482',
        name: '美宜佳',
        youhuiquan: '国庆礼券10￥',
        jine: '10.00',
        xianzhi: '无门槛',
        shixian: '7',
        zongshu: 'xxx',
        lingqu: 'xxxxx.xx'
      }, {
        date: '1654484',
        name: '美宜佳',
        youhuiquan: '国庆礼券10￥',
        jine: '10.00',
        xianzhi: '无门槛',
        shixian: '7',
        zongshu: 'xxx',
        lingqu: 'xxxxx.xx'
      }, {
        date: '1654481',
        name: '美宜佳',
        youhuiquan: '国庆礼券10￥',
        jine: '10.00',
        xianzhi: '无门槛',
        shixian: '7',
        zongshu: 'xxx',
        lingqu: 'xxxxx.xx'
      }]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.cash {
    margin: 8px;
    border-radius: 4px;
    border: 1px solid black;
    padding: 20px;
  }
  .ymjz {
    text-align: center;
  }
  .clearfix{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #606266;
  }
</style>
